<template>
    <view class="members-asks" style="background-color: #f7f7f7">
        <view left-arrow title="咨询管理" @click-left="onClickLeft" @click-right="onClickRight">
        </view>
        <view class="tabs-view">
			<u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="changeTabs" active-color="#ff5000" bar-width="80"></u-tabs>
        </view>
        <view class="ask-container">
            <mescroll-body ref="mescrollRef" top="80" auto="false" :down="down"  @init="mescrollInit" @down="downCallback" @up="upCallback">
                <view class="faq_answers_list" v-if="current === 0">
                    <uni-swipe-action :right-width="65">
                        <uni-swipe-action-item v-for="(ask, index) in askList" :key="index" :right-options="options" @click="handleAsk(index)">
                            <view class="faq_goods">
                                <view class="u-flex" @click="handleAskDetail(ask.ask_id, ask.goods_id)">
                                   <view class="">
                                        <u-image width="100" height="100" :src="ask.goods_img" />
                                    </view>
                                    <view class="u-flex-1 u-m-l-15">
                                        <view class="goods-name" v-html="ask.goods_name">{{ ask.goods_name }}</view>
                                    </view>
                                </view>
                                <view class="u-m-t-20">
                                    <view class="" @click="handleAskDetail(ask.ask_id, ask.goods_id)">
                                        <view class="ask-content u-m-b-15">{{ ask.content }}</view>
                                        <view class="u-flex u-row-between u-font-14 time-num">
                                            {{ ask.create_time | unixToDate }}
                                            <text class="">{{ ask.reply_num }} 回答</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </uni-swipe-action-item>
                    </uni-swipe-action>
                </view>
                <view class="fau_answers_list" v-if="current === 1">
                    <uni-swipe-action :right-width="65">
                        <uni-swipe-action-item v-for="(answer, index) in answerList" :key="index" :right-options="options" @click="handleAsk(index)">
                            <view class="faq_goods">
                                <view class="u-flex">
                                   <view class="">
                                        <u-image width="100" height="100" :src="answer.goods_img" />
                                    </view>
                                    <view class="u-flex-1 u-m-l-15">
                                        <view class="goods-name" v-html="answer.goods_name">{{ answer.goods_name }}</view>
                                    </view>
                                </view>
                                <view class="u-m-t-20">
                                    <view class="">
                                        <view class="ask-content u-m-b-15">{{ answer.ask_content }}</view>
                                        <view class="faq_question_desc" >
                                          <text class="">我的回答：</text>{{ answer.content || '' }}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </uni-swipe-action-item>
                    </uni-swipe-action>
                </view>
                <view class="faq_answers_list" v-if="current === 2">
                  <view v-for="(answer, index) in answerList" :key="index">
                    <view class="faq_goods">
                      <view class="u-flex">
                         <view class="">
                              <u-image width="100" height="100" :src="answer.goods_img" />
                          </view>
                          <view class="u-flex-1 u-m-l-15">
                              <view class="goods-name" v-html="answer.goods_name">{{ answer.goods_name }}</view>
                          </view>
                      </view>
                      <view class="faq_question">
                        <view class="faq_question_wrap">
                          <view class="faq_question_head">{{ answer.ask_content }}</view>
                          <view class="faq_question_desc faq_question_btn">
                            <view class="oh_btn bg_white" @click="handleReplyAsk(answer.ask_id)">去回答</view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
            </mescroll-body>
        </view>
        <loading-view v-if="loading"></loading-view>
    </view>
</template>

<script>
    import * as API_Members from '@/api/members'
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
    export default {
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
                tabsList: [{
                        name: '我的提问'
                    },
                    {
                        name: '我的回答'
                    },
                    {
                        name: '邀请我答'
                    }
                ],
                active: 0,
                current: 0,
                params: {
                    page_no: 0,
                    page_size: 10
                },
                askList: [],
                answerList: [],
                options: [{
                    text: '删除',
                    style: {
                        backgroundColor: '#ff5000'
                    }
                }],
                down: {
                    auto: false //是否在初始化完毕之后自动执行一次下拉刷新的回调
                },
				goodsDit: '',
                loading: true
            }
        },
        methods: {
            changeTabs(index) {
                this.current = index
                this.askList = []
                this.answerList = []
                this.params.page_no = 1
                this.mescroll.resetUpScroll(true)
            },
            //下拉刷新
            downCallback() {
                this.changeTabs(this.current)
            },
            //上拉加载
            upCallback(page) {
                this.params.page_no = page.num
                if (this.current === 0) {
                    this.GET_AskList()
                } else if(this.current === 1) {
                    this.GET_Answer()
                } else {
                    this.GET_Answers()
                }
            },
            handleAskDetail(ask_id, goods_id) {
                uni.navigateTo({
                    url: `/mine-module/ask-detail?ask_id=${ask_id}&goods_id=${goods_id}`
                })
            },
            handleReplyAsk(ask_id) {
                uni.navigateTo({
                    url: `/mine-module/reply-answer?ask_id=${ask_id}`
                })
            },
            //左滑删除事件
            handleAsk(index) {
                let that = this
                const ask_id = this.askList[index].ask_id
                const id=this.answerList[index].id
                uni.showModal({
                    title: '提示',
                    content: '确定要删除这条消息吗？',
                    confirmColor: '#ff5000',
                    success(res) {
                        if (res.confirm) {
                             if (this.current === 0) {
                                 API_Members.deleteAsk(ask_id).then(() => {
                                     uni.showToast({
                                         title: '删除成功'
                                     })
                                     that.downCallback()
                                 })
                             }else if(this.current === 1){
                                 API_Members.deleteAnswers(id).then(() => {
                                     uni.showToast({
                                         title: '删除成功'
                                     })
                                     that.downCallback()
                                 })
                             }
                        }
                    }
                })
            },

            /** 获取会员咨询列表 */
            GET_AskList() {
                API_Members.getConsultations(this.params).then(response => {
                    const { data } = response
                    this.askList.push(...data)
                    this.loading = false
                    this.mescroll.endBySize(data.length, response.data_total)
                })
            },
            /** 获取会员回答列表 */
            GET_Answer() {
              const params = {
                  reply_status: 'YES',
                  ...this.params
              }
              API_Members.getAnswers(params).then(response => {
                const { data } = response
                this.answerList.push(...data)
                this.loading = false
                this.mescroll.endBySize(data.length, response.data_total)
              })
            },
            /** 获取会员咨询列表 */
            GET_Answers() {
				const params = {
					reply_status: 'NO',
					...this.params
				}
				 API_Members.getAnswers(params).then(response => {
					const { data } = response
					this.answerList.push(...data)
                    this.loading = false
					this.mescroll.endBySize(data.length, response.data_total)
				})
            }
        },
		onLoad(options) {
			if(options.curd == 1){
				this.current = options.curd
				this.current = Number(options.curd)
				// this.changeTabs(this.current)
			}
		}
    }
</script>

<style lang="scss">
    .members-asks {
        height: 100%;
        background-color: #fff;
    }
    .faq_goods {
        width: 95%;
        padding: 20rpx;
        border-bottom: 2rpx solid #f4f4f4;
        background-color: #fff;
		margin: 20rpx 20rpx 0 20rpx;
		border-radius: 10rpx;
        .ask-content {
            font-weight: 600;
            word-wrap:break-word;
            word-break:normal;
        }
        .time-num {
            color: #666;
        }
        .goods-name {
            color: #333;
            font-size: 24rpx;
            height: 72rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }

    .faq_goods.type_arrow {
        padding: 10rpx 10rpx 10rpx 10rpx;
    }

    .faq_goods.type_slim {
        height: 50rpx;
    }

    .faq_goods_cover {
        position: absolute;
        top: 10rpx;
        left: 10rpx;
        width: 75rpx;
        height: 75rpx;
        overflow: hidden;
    }

    .faq_goods.type_slim .faq_goods_cover {
        width: 50rpx;
        height: 50rpx;
    }

    .faq_goods_cover img {
        // position: absolute;
        // top: 50%;
        // left: 50%;
        // width: 100%;
        // height: auto;
        // transform: translate(-50%, -50%);
        width: 120rpx;
        flex: 0 0 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
        border-radius: 12rpx;
    }

    .faq_goods.type_slim .faq_goods_info {
        margin-left: 60rpx;
        padding: 7rpx 0;
    }

    .faq_goods_info_name {
        color: #333;
        font-size: 12rpx;
        height: 36rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .faq_question {
        padding-top: 40rpx;
        background-color: #fff;
    }

    .faq_question_wrap {
        position: relative;
        border-radius: 2rpx;
    }

    .faq_question_head {
        position: relative;
        color: #333;
        font-weight: 700;
        line-height: 1.5;
        word-wrap: break-word;
    }

    // .faq_question_head_time {
    //     position: absolute;
    //     top: 0;
    //     right: 0;
    //     color: #999;
    //     font-size: 10px;
    // }

    .faq_question_desc {
        position: relative;
        line-height: 40rpx;
        color: #666;
        word-wrap: break-word;
        // font-size: 20rpx;
    }
    .faq_question_btn {
        display: flex;
        flex-direction: row-reverse;
        padding-top: 20rpx;
    }
    .bg_white {
        text-align: center;
        width: 90px;
        height: 25px;
        line-height: 25px;
        border-radius: 15px;
        margin-left: 8px;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        background-color: #fff;
        color: #f44;
        border: 1px solid #f44;
    }
    .faq_answers_list {
        display: flex;
        flex-direction: column;
    }

    .faq_answers_list li:not(:last-child) {
        border-bottom: 1rpx solid #ddd;
    }
</style>
